<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<base href="/CustomMVC/">
		<meta charset="UTF-8">
		<title>用户信息页面</title>
		<script src="js/jquery.min.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}

			body {
				/*background: url("img/背景01.jpg") no-repeat center;*/
				padding-top: 25px;
			}

			.rg_layout {
				width: 900px;
				height: 500px;
				border: 8px solid #EEEEEE;
				background-color: rgba(134, 112, 78, 0.33);
				/*background: url("img/背景01.jpg") round center;*/
				/*让div水平居中*/
				margin: auto;
			}

			.rg_left {
				/*border: 1px solid red;*/
				float: left;
				margin: 15px;
			}

			.rg_left>p:first-child {
				color: #FFD026;
				font-size: 20px;
			}

			.rg_left>p:last-child {
				color: #A6A6A6;
				font-size: 20px;

			}

			.rg_center {
				float: left;
				/* border: 1px solid red;*/

			}

			.rg_right {
				/*border: 1px solid red;*/
				float: right;
				margin: 15px;
			}

			.rg_right>p:first-child {
				font-size: 15px;

			}

			.rg_right p a {
				color: #ff0000;
			}

			.td_left {
				width: 100px;
				text-align: right;
				height: 45px;
			}

			.td_right {
				padding-left: 50px;
			}

			#username,
			#password,
			#address,
			#email,
			#name,
			#tel,
			#birthday,
			#checkcode {
				width: 251px;
				height: 32px;
				border: 1px solid #A6A6A6;
				/*设置边框圆角*/
				border-radius: 5px;
				padding-left: 10px;
			}

			#checkcode {
				width: 110px;
			}

			#img_check {
				height: 32px;
				vertical-align: middle;
			}

			#btn_sub,#btn_return {
				width: 150px;
				height: 40px;
				background-color: #56bb00;
				border: 1px solid #56bb00;
			}

			#headImg{
				width: 150px;
				height: 150px;
				border: 2px solid #02eccc;
				position: relative;
				margin: 50px auto;
				overflow: hidden;
				border-radius: 50%;
			}
			#headImg img{
				height: 100%;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		</style>

	</head>
	<body>

		<div class="rg_layout">
			<div class="rg_left">
				<p>用户信息修改</p>
				<p>USER REGISTER</p>
				<div id="headImg">
					<img src="img/04_user.jpg" th:if="${user.ud.headPicUrl==null}"/>
					<img th:src="${user.ud.headPicUrl}" th:if="${user.ud.headPicUrl!=null}"/>
				</div>
			</div>

			<div class="rg_center">
				<div class="rg_form">
					<!--定义表单 form-->
					<form action="userUpload" method="post" enctype="multipart/form-data">
						<input type="hidden" name="headPicUrl" value="img/04_user.jpg" th:if="${user.ud.headPicUrl==null}">
						<input type="hidden" name="headPicUrl" th:value="${user.ud.headPicUrl}" th:if="${user.ud.headPicUrl!=null}">
						<input type="file" id="uploadFile" name="uploadFile" multiple="multiple" style="display: none;">
						<table>
							<tr>
								<td class="td_left">账号</td>
								<td class="td_right" th:text="${user.account}"></td>
							</tr>
							<tr>
								<td class="td_left"><label for="name">姓名</label></td>
								<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名" th:value="${user.ud.name}"></td>
							</tr>
							<tr>
								<td class="td_left"><label>性别</label></td>
								<td class="td_right">
									<span th:if="${user.ud.sex} ne 女">
										<input type="radio" name="sex" value="男" checked> 男
										<input type="radio" name="sex" value="女"> 女
									</span>
									<span th:if="${user.ud.sex} eq 女">
										<input type="radio" name="sex" value="男"> 男
										<input type="radio" name="sex" value="女" checked> 女
									</span>
								</td>
							</tr>
							<tr>
								<td class="td_left"><label for="birthday">生日</label></td>
								<td class="td_right"><input type="date" name="birthday" id="birthday"
											th:value="${user.getUd().getBirthdayStr()}"	placeholder="请输入出生日期"></td>
							</tr>

							<tr>
								<td class="td_left"><label for="address">地址</label></td>
								<td class="td_right"><input type="text" name="address" id="address"
										th:value="${user.ud.address}" placeholder="请输入地址"></td>
							</tr>

							<tr>
								<td class="td_left"><label for="email">Email</label></td>
								<td class="td_right"><input type="email" name="email" id="email"
															th:value="${user.ud.email}" placeholder="请输入邮箱">
								</td>
							</tr>
							<tr>
								<td class="td_left"><label for="tel">手机号</label></td>
								<td class="td_right"><input type="text" name="phone" id="tel"
															th:value="${user.ud.phone}" placeholder="请输入手机号"></td>
							</tr>
							<tr>
								<td class="td_left"><label for="checkcode">验证码</label></td>
								<td class="td_right"><input type="text" name="checkcode" id="checkcode"
										placeholder="请输入验证码">
									<img id="img_check" src="authCode">
								</td>
							</tr>
							<tr>
								<td colspan="2" align="center">
									<input type="submit" id="btn_sub" value="提交">
									<input type="button" id="btn_return" value="返回">
								</td>
							</tr>
						</table>
					</form>
				</div>
			</div>
			<div class="rg_right">
				<p>已有账号?<a href="#">立即登录</a></p>
			</div>

		</div>
	</body>
	<script type="text/javascript">
		$(function (){
			//返回按钮事件
			$("#btn_return").click(function (){
				location.href="home";
			});
			//验证码点击事件
			$("#img_check").click(function (){
				this.src = "authCode";
			})
			//给头像图片绑定点击事件
			$("#headImg img").click(function () {
				//点击图片时动态创建文件选择框，并触发点击。
				//$("<input type=\"file\" onchange=\"showDataByURL(this)\">").click();
				$("#uploadFile").click();
			});
			//文件选择组件绑定改变事件
			$("#uploadFile").change(function (){
				showDataByURL(this);
			});
			//显示后台消息
			showMsg();
		})

		//显示后台返回的消息
		function showMsg(){
			let msg = "[(${msg})]";
			if(msg!=null&&msg!=""){
				alert(msg);
			}
		}

		//显示头像（本地文件显示）
		function showDataByURL(obj) {
			//获取选中的图片
			var headImg = obj.files[0];
			//实例化FileReader对象
			var reader = new FileReader();
			//读取选中的图片
			reader.readAsDataURL(headImg);
			//加载完成后的回调
			reader.onload = function (e) {
				//获取图片的url地址
				var urlData = this.result;
				//显示图片
				$("#headImg img").attr("src", urlData);
			};
		}
	</script>
</html>
